<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false">
				<TabPane label="配件报价信息" name="info">
					<Form ref="formValidate" :model="formInline" :rules="ruleValidate" :label-width="150" class="form_list">
						<FormItem label='询价单号：'>
							<span>{{info.orderNum}}</span>
						</FormItem>
						<FormItem label='车辆类型：'>
							<span>{{info.typeName}}</span>
						</FormItem>
						<FormItem label='车辆品牌：'>
							<span>{{info.brandName}}</span>
						</FormItem>
						<FormItem label='车辆规格：'>
							<span>{{info.carSpec}}</span>
						</FormItem>
						<FormItem label='联系人：'>
							<span>{{info.tel}}</span>
						</FormItem>
						<FormItem label='姓名：'>
							<span>{{info.buyerName}}</span>
						</FormItem>
						<FormItem label='地址：'>
							<span>{{info.address}}</span>
						</FormItem>
						<FormItem label='发布时间：'>
							<span>{{info.createTime}}</span>
						</FormItem>
						<FormItem label="配件信息：">
							<table class="priceTable">
								<tr>
									<th width="10%">序号</th>
									<th width="20%">配件类型</th>
									<th width="20%">配件品牌</th>
									<th width="20%">配件规格</th>
									<th width="10%">数量</th>
									<th width="20%">报价</th>
								</tr>
								<tr v-for="(item,index) in partsOutputList">
									<td>{{index+1}}</td>
									<td>{{item.typeName}}</td>
									<td>{{item.brandName}}</td>
									<td>{{item.partsSpec}}</td>
									<td>{{item.num}}</td>
									<td>
										<Input style="width:90%;" v-model.number="item.price" size="small"></Input>
									</td>
								</tr>
							</table>
						</FormItem>

						<div class="button_list">
							<Button type="primary" @click="submitForm">提交</Button>
							<Button type="primary" @click="cancelForm" style="margin-left: 15px;">返回</Button>
						</div>
					</Form>

				</TabPane>
			</Tabs>
		</Card>
	</div>


</template>

<script>
	import {
		formatDate
	} from '../utils/time.js'
	export default {
		components: {
		},
		data() {
			return {
				partsOutputList: [],
				info: {},
                partsFactoryId: ''
			}
		},
        mounted() {
            // 查询配件报价信息
            this.getInfo();
        },
		methods: {
			getInfo() {
                this.partsFactoryId = sessionStorage.getItem("factoryId");
                let data = {
                    id: this.$route.query.id,
                    partsFactoryId: this.partsFactoryId
                };

                this.$http.post('/partsInquiry/offer_details', data).then(res => {
                    if (res.status == 200) {
                        if (res.data.code == 200) {
                            this.info = res.data.data;
                            this.info.createTime = formatDate(new Date(res.data.data.createTime), 'yyyy-MM-dd hh:mm:ss');
                            this.partsOutputList = res.data.data.partsOutputList;
                        }

                    }

                })
			},
            submitForm() {
                let data = {}
                let partsList = []
                this.partsOutputList.forEach(v => {
                    partsList.push({
                        partsInquiryId: v.partsInquiryId,
                        userId: this.info.userId,
                        partsFactoryId: this.partsFactoryId,
                        uintPrice: v.price,
                        partsId: v.id
					})
				});
                data.partsQuotationListJson = JSON.stringify(partsList)

                this.$http.post('/partsQuotation/offer', data).then(res => {
                    if (res.status == 200) {
                        if (res.data.code == 200) {
                            this.$Message.success('操作成功')
                            setTimeout(() => {
                                this.$router.push('/partsInquiryList');
                            }, 500)
                        }
                    }
                    else {
                        this.$Message.error(res.msg);
                    }
                })
            },
            cancelForm() {
                this.$router.push('/partsInquiryList');
            }
		}
	}
</script>

<style scoped>
	.priceTable {
		width: 100%;
		color: #515a6e;
		font-size: 12px;
		border-spacing: 0px;
		border-top: 1px solid #e8eaec;
		border-left: 1px solid #e8eaec;
	}
	.priceTable th {
		height: 40px;
		white-space: nowrap;
		overflow: hidden;
		background-color: #f8f8f9;
		text-overflow: ellipsis;
		vertical-align: middle;
		border-bottom: 1px solid #e8eaec;
		border-right: 1px solid #e8eaec;
	}
	.priceTable td {
		height: 34px;
		white-space: nowrap;
		overflow: hidden;
		padding: 0 10px;
		border-right: 1px solid #e8eaec;
		border-bottom: 1px solid #e8eaec;
		text-align: center;
	}
	.button_list {
		text-align: center;
		margin-top: 15px;
	}
</style>

<style>
	.form_list .ivu-form-item {
		margin-bottom: 5px;
	}
</style>